<template>
	<!-- 使用说明
	 1.src/str二选一，不能同时传，src是文件路径，str是文件内容(一般svg只有一两个的时候可以直接传svg内容，多的时候传svg路径地址)
	 2.color:是要改变的颜色
	 3.width/height：分别对应宽高，带单位rpx/px等
	 4.新增stroke 表示边框颜色
	-->
	<view class="svgBox">
		<image :style="`width: ${width};height: ${height};`" :src="svgData" :mode="imgMode"></image>
	</view>
</template>
<script>
	import {
		Base64
	} from './base64.js';
	const base64 = new Base64();
	export default {
		name: "svimg",
		/**
		 * 组件的属性列表
		 */
		props: {
			src: {
				type: String,
				value: ''
			},
			str:{
				type:String,
				value:'',
			},
			color: {
				type: String,
				value: '#000000'
			},
			stroke:{
				type:String,
				value:'',
			}, //此值为边框线条颜色
			width: {
				type: String,
				value: '20rpx'
			},
			height: {
				type: String,
				value: '20rpx'
			},
			imgMode:{
				type: String,
				value: 'aspectFill'
			}
		},
		mounted() {
			this.changeSvg(this.color,this.stroke);
		},
		/**
		 * 组件的初始数据
		 */
		data() {
			return {
				svgData: '',
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			changeSvg(color,strokeColor) {
				let that = this;
				//str直接传内容
				if(!that.src){ 
					let newFile = that.changeColor(that.str, color,strokeColor);
					let svgBase64File = base64.encode(newFile);
					that.svgData = 'data:image/svg+xml;base64,' + svgBase64File;
					return
				}
				//src传地址
				// #ifdef H5
				const xhrFile = new XMLHttpRequest();
				let src = (window.templateSkin ? window.templateSkin : '') + that.src;
				let http = ''; // 
				if(src.indexOf('://') > -1){ // 包含http
					http = src.split('://')[0] + '://';
					src =  src.split('://')[1]
				}
				let srcArr = src.split('/')
				let realSrcArr = srcArr.filter(item => {
					return item && item.trim();
				})

				let realSrc = http + realSrcArr.join('/');
				if(realSrc.indexOf('http') > -1){
					xhrFile.open("GET", realSrc, true);
				}else{
					xhrFile.open("GET", window.masterDomains + '/' + realSrc, true);
				}
				xhrFile.onload = function() {
					const allText = xhrFile.response;
					let newFile = that.changeColor(allText, color,strokeColor);
					let svgBase64File = base64.encode(newFile);
					that.svgData = 'data:image/svg+xml;base64,' + svgBase64File;
				}
				// console.log(xhrFile)
				xhrFile.send();
				// #endif

				// #ifdef MP
				let fileSystemManager = uni.getFileSystemManager();
			
				fileSystemManager.readFile({
					filePath: that.src,
					encoding: 'utf8',
					success: res => {
						let sourceFile = res.data;
						let newFile = that.changeColor(sourceFile, color,strokeColor);
						let svgBase64File = base64.encode(newFile);
						that.svgData = 'data:image/svg+xml;base64,' + svgBase64File;
						// console.log(that.svgData)
					}
				});
				// #endif
				return false
			},
			changeColor(sourceFile, color, strokeColor) {
				let newSvg;
				if (/fill=".*?"/.test(sourceFile)) {
					newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${color}"`); // SVG有默认色
				} else {
					newSvg = sourceFile.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色
				};
				if(strokeColor){
					if (/stroke=".*?"/.test(sourceFile)) {
						newSvg = sourceFile.replace(/stroke=".*?"/g, `stroke="${strokeColor}"`); // SVG有默认色
					} else {
						newSvg = sourceFile.replace(/<svg /g, `<svg stroke="${strokeColor}" `); // 无默认色
					};
				}
				// console.log(newSvg)
				return newSvg
			}
		},
		computed: {
			srcColor() {
				const {src,color} = this;
				return {src,color}
			}
		},
		watch: {
			srcColor(val) {
				this.changeSvg(val.color);
			}
		}
	}
</script>
<style>
	.svgBox{display: flex;}
</style>